<template>
    <el-dialog v-model="visible" title="选择图标" width="500px">
        <div class="icon-grid">
            <div v-for="icon in icons" :key="icon" class="icon-item" @click="selectIcon(icon)">
                <component :is="icon" class="icon" />
                <span class="icon-name">{{ icon }}</span>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const icons = Object.keys(ElementPlusIconsVue)

const visible = ref(false)

const open = () => {
    visible.value = true;
}
const selectedIcon = ref('')
defineExpose({
    open,
    selectedIcon
})


const close = () => {
    visible.value = false;
}

const selectIcon = (iconName) => {
  selectedIcon.value = iconName
  close()
}
</script>

<style scoped>
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 20px;
  overflow: auto;
  max-height: calc(100vh - 300px);
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.icon-item:hover {
  background-color: #f5f7fa;
  transform: scale(1.1);
}

.icon {
  width: 1.5em;
  height: 1.5em;
  margin-bottom: 8px;
}

.icon-name {
  font-size: 12px;
  text-align: center;
  word-break: break-all;
}
</style>